//调用函数，判断是否有token
checkLogin()
//调用函数，加入用户名显示
renderUsername()
//退出功能
logout()


//统计数据
async function getData() {
  const token = localStorage.getItem('token')
  // try {
  const res = await axios.get('/dashboard',
    // {
    //     //请求头参数 → 校验是否登录
    //     headers: {
    //         Authorization: token
    //     }
    // }
  )
  console.log(res);
  const { overview, year, salaryData, groupData, provinceData } = res.data
  console.log(overview);
  renderData(overview)

  // } 
  // catch (err) {
  //展开收集的错误
  //注意：是 dir！！！  不是 log
  // console.dir(err);
  //401就是token失效的问题 → 过期或恶意篡改
  //todo：提示重新登录，login页面 → 把localStorage里面的用户缓存清空
  // if (err.response.status == 401) {
  //     showToast('登录失败，请重新登录')
  //     localStorage.removeItem('username')
  //     localStorage.removeItem('token')
  //     setTimeout(() => {
  //         location.href = './login.html'
  //     }, 1500);
  // }
  // }

  //平滑曲线图
  // console.log(res.data.year);
  // const year = res.data.year
  // let year1 = []
  // let year2 = []
  //数据获取
  // year.map(function (el, index) {
  //   // console.log(el);
  //   year1.push(Object.values(el)[0])
  //   year2.push(Object.values(el)[1])
  // })
  // line(year1,year2)
  line(year)



  //饼图
  // const salaryData = res.data.salaryData
  salary(salaryData)
  // console.log(salaryData);

  bar(groupData)
  twoBar(salaryData)
  map(provinceData)
  function renderData(overview) {
    Object.keys(overview).forEach(key => {
      document.querySelector(`.${key}`).innerHTML = overview[key]
    })
  }





}
getData()
//曲线图
function line(year) {
  const myChartLine = echarts.init(document.querySelector('#line'))
  option = {
    title: {
      show: true,
      text: '2022全学科薪资走势',
      top: 20,
      left: 10
    },
    grid: {
      top: '20%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {

      }
    },

    xAxis: {
      //图内所有x轴的线
      // splitLine:{
      //   show:true,
      //   lineStyle:{
      //     type:'solid',
      //     color:'#FF9800'
      //   }
      // },
      //x轴的线
      axisLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      data: year.map(item => item.month)
    },
    yAxis: {
      //图内所有y轴的线
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data: year.map(item => item.salary),
        type: 'line',
        tooltip: {
          show: true,
          trigger: 'axis'

        },
        smooth: true,
        lineStyle: {
          width: 6,
          color: '#4A9CEE'
        },
        emphasis: {
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0, color: 'rgba(25, 122, 249,0.5)'
                },
                {
                  offset: 1, color: 'rgba(25, 122, 249,0)'
                }
              ]
            }
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.3, color: 'rgba(25, 122, 249,0.5)'
              },
              {
                offset: 1, color: 'rgba(25, 122, 249,0)'
              }
            ]
          }
        },
        symbolSize: 8 //圆点大小

      }
    ]
  };
  myChartLine.setOption(option)
}
//饼图
function salary(salaryData) {
  // let arr = salaryData.map(function (el, index) {
  //   return { name: Object.values(el)[0], value: Object.values(el)[1] + Object.values(el)[2] }
  // })
  const myChartSalary = echarts.init(document.querySelector('#salary'))
  option1 = {
    tooltip: {
      trigger: 'item'
    },

    title: {
      text: '班级薪资分布',
      left: 10,
      top: 10
    },
    //图例
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',
        radius: ['55%', '70%'],
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        avoidLabelOverlap: false,
        //在饼图小扇区外面加了个边框线
        itemStyle: {
          borderRadius: 12,
          borderColor: '#fff',
          borderWidth: 2
        },
        //饼图的标签文字
        label: {
          show: false,
          position: 'center'
        },
        //高亮效果--高亮状态的扇区和标签样式
        emphasis: {
          label: {
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        //饼图标签文字的连接线
        labelLine: {
          show: false
        },
        // data: arr
        data: salaryData.map(item => ({ name: item.label, value: item.g_count + item.b_count }))
      }
    ]
  };
  myChartSalary.setOption(option1)
}

//双柱状图
function bar(groupData) {
  const myChartBar = echarts.init(document.querySelector('#lines'))
  const option = {
    xAxis: {
      type: 'category',
      data: groupData[1].map(item => item.name),
      axisLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    tooltip: {
      show: true,
      // trigger: 'axis'

    },
    series: [
      {
        data: groupData[1].map(item => item.hope_salary),
        type: 'bar',
        name: '期望薪资',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0, color: '#3BE8AA'
            },
            {
              offset: 1, color: '#D5F6EA'
            }
          ]
        }
      },
      {
        data: groupData[1].map(item => item.salary),
        type: 'bar',
        name: '就业薪资',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0, color: '#51ADFD'
            },
            {
              offset: 1, color: '#D6ECFF'
            }
          ]
        }
      }
    ]
  };
  myChartBar.setOption(option)


  //班级按钮
  document.querySelector('#btns').addEventListener('click', function (e) {
    if (e.target.classList.contains('btn')) {
      document.querySelector('.btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')

      const num = e.target.innerHTML
      const data = groupData[num]
      console.log(data);
      option.xAxis.data = data.map(item => item.name)
      option.series[0].data = data.map(item => item.hope_salary)
      option.series[1].data = data.map(item => item.salary)
      myChartBar.setOption(option)
    }

  })

}

//双饼图
function twoBar(salaryData) {
  const myChartTwoBar = echarts.init(document.querySelector('#gender'))
  const option = {
    tooltip: {
      trigger: 'item'
    },
    title: [
      {
        text: '男女薪资分布',
        top: 15,
        left: 15,
        textStyle: {
          fontSize: 16
        }
      }, {
        text: '男生',
        top: '45%',
        left: '45%',
        textStyle: {
          fontSize: 12
        }
      }, {
        text: '女生',
        top: '85%',
        left: '45%',
        textStyle: {
          fontSize: 12
        }
      }
    ],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['20%', '30%'],
        center: ['50%', '30%'],
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          // position: 'center'
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: 'bold'
        //   }
        // },
        labelLine: {
          show: true
        },
        data: salaryData.map(item => ({ name: item.label, value: item.b_count }))

      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['20%', '30%'],
        center: ['50%', '70%'],
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          // position: 'center'
        },
        labelLine: {
          show: true
        },
        data: salaryData.map(item => ({ name: item.label, value: item.g_count }))

      }
    ]
  }
  myChartTwoBar.setOption(option)

}

//地图
function map(provinceData) {
  const myChartMap = echarts.init(document.querySelector('#map'))
  let outdata = [];
  let outname = provinceData.map(item=>{
    if(item.name.length==4 || item.name=='内蒙古自治区'){
      return item.name.substring(0,3)
    }else if(item.name.length==3 || item.name.length>4){
      return item.name.substring(0,2)
    }
    return item.name
  })
  let outvalue =provinceData.map(item=>item.value)
  for (let i = 0; i < outname.length; i++) {
    outdata.push({
      name: outname[i],
      value: outvalue[i]
    })
  }
  console.log(outdata);
  
  const option = {
    tooltip: {
      show: true,
      formatter: function (params) {  
        if (params.value) {
          return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '个&nbsp;&nbsp;';
        } else {
          return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;0个&nbsp;&nbsp;';
        }
      }
    },
    visualMap: {
      min: 0,
      max: 6,
      itemWidth: 15,
      itemHeight: 89,
      left: '20',
      bottom: '10',
      text: ['6', '0'],
      textStyle: {
        color: '#666666',
        fontSize: 13,
      },
      inRange: {
        color: ['#D9EEFF', '#2F9BFF']
      },
      outOfRange: {
        show: false,
      }
    },

    geo: {
      map: 'china',
      show: true,
      roam: false,
      label: {
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        normal: {
          show: false
        }
      }
    },
    series: [{
      type: 'map',
      map: 'china',
      aspectScale: 0.75,
      //zoom:1.1,
      label: {
        normal: {
          formatter: function (para) {
            return '{name|' + para.name + '}'
          },
          rich: {
            cnNum: {
              fontSize: 11,
              color: '#333333',
              align: 'center',
            },
            name: {
              fontSize: 11,
              color: '#333333',
              align: 'center',
              lineHeight: 20,
            },
          },
          //formatter: '{b}',
          color: '#333333',
          show: true
        },
        emphasis: {
          show: false,
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#D9EEFF',
          borderColor: '#fff',
          borderWidth: 1,
        },
        emphasis: {
          areaColor: '#49C85A',
        }
      },
      data: outdata
    }]
  };

  myChartMap.setOption(option)
}